<template>
	<view>
		<view class="login">
			<view class="login-top">
				<view class="login-title">
					嗨，您好
				</view>
				<view class="flex-js login-2">
					<view class="login-title flex">
						<text class="">欢迎登录</text>
						<text class="login-1">{{title}}</text>
					</view>
					<view class="login-change" @click="cli_other">
						切换厂家端
					</view>
				</view>
			</view>
			<view class="login-content">
				<view class="login-content-qiehuan" v-if="login_where">
					<view class="login-content-qiehuan-left">
						密码登录
					</view>
					<view class="login-content-qiehuan-right" @click="login_where = false">
						验证码登录
					</view>
				</view>
				<view class="login-content-qiehuan" v-else>
					<view class="login-content-qiehuan-left1" @click="login_where = true">
						密码登录
					</view>
					<view class="login-content-qiehuan-right2">
						验证码登录
					</view>
				</view>
				<!-- 输入框事件 -->
				<view class="login-id">
					<image class="login-id-img" src="https://www.zzzsyh.com/applets/agent/agent/login-5.png" mode=""></image>
					<input class="login-input" type="digit" @blur="pass_blur" @input="change_phone" v-model="put.phone"
						value="" placeholder-class="inputplace" placeholder="请输入手机号" />
				</view>
				<view class="login-password">
					<image class="login-password-img" src="https://www.zzzsyh.com/applets/agent/agent/login-6.png" mode=""></image>
					<input v-if="login_where && show_look == false" class="login-input" @blur="pass_blur"
						@focus="pass_focus" @input="change_pass" password type="text" v-model="password_false"
						placeholder-class="inputplace" placeholder="请输入密码" />
					<input v-else class="login-input" v-model="put.password" auto-blur=true type="text" value=""
						placeholder-class="inputplace" placeholder="请输入密码" />
					<view class="login-password-look" @click="cli_inputType" v-if="login_where">
						<image v-if="show_look" class="login-password-look-img" src="https://www.zzzsyh.com/applets/agent/agent/login-3.png"
							mode=""></image>
						<image v-else class="login-password-look-img" src="https://www.zzzsyh.com/applets/agent/agent/login-4.png" mode="">
						</image>
					</view>
					<view class="" v-else>
						<view class="" v-if="show_yzm">
							<view class="login-duanxin" v-if="show_yzm_two" @click="cli_sendSMS">
								获取验证码
							</view>
							<view class="login-duanxin" v-else>
								{{yzm_time}}s
							</view>
						</view>
						<view class="login-duanxin login-duanxin2" v-else>
							获取验证码
						</view>
					</view>

				</view>
				<view class="login-fargit">
					<text class="login-fargit-txt" @click="cli_forget">忘记密码?</text>
				</view>
				<view class="login_btn">
					<view class="login-login" v-if="show_login" @click="cli_login">
						登录
					</view>
					<view v-else class="login-login login-login-two" @click="cli_loginNo">
						登录
					</view>
				</view>

				<view class="login-xieyi flex">
					<image class="login-xieyi-img" @click="cli_xieyi" v-if="show_gouxuan"
						src="https://www.zzzsyh.com/applets/agent/agent/login-8.png" mode=""></image>
					<image class="login-xieyi-img" @click="cli_xieyi" v-else src="https://www.zzzsyh.com/applets/agent/agent/login-10.png"
						mode=""></image>
					<text class="login-xieyi-1">我已阅读并同意</text>
					<text class="login-xieyi-2" @click="cli_goPrivacy">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				title: "会长端",
				login_where: true, // 登录切换
				show_look: false, // 密码战士隐藏
				input_type: 'text', // 输入框的格式
				show_yzm: false, // 验证码是否可点
				show_yzm_two: true, // 倒计时
				yzm_time: 60, // 验证码倒计时
				show_gouxuan: true, // 是否勾选用户协议
				password_false: '',
				put: {
					phone: '',
					password: '',
				}
			}
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '主事丫环会长端',
			}
		},
		mounted() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		computed: {
			show_login() {
				let re = /^1\d{10}$/
				let val1 = this.put.phone
				let val2 = this.put.password
				let val3 = this.show_gouxuan
				if (re.test(val1) && val2 && val3) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			// 是否勾选用户协议
			cli_xieyi() {
				this.show_gouxuan = !this.show_gouxuan
			},
			// 点击切换到厂家登录
			cli_other() {
				uni.redirectTo({
					url: '/pages/manufacturers/login/login'
				})
			},
			// 点击跳转隐私政策
			cli_goPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				})
			},
			// 点击跳转忘记密码
			cli_forget() {
				uni.navigateTo({
					url: '/pages/loginForget/loginForget'
				})
			},
			// 输入手机号
			change_phone(e) {
				let re = /^1\d{10}$/
				// console.log(e);
				let val = e.detail.value
				if (re.test(val)) {
					this.show_yzm = true
				} else {
					this.show_yzm = false
				}
			},
			pass_focus() {
				// this.input_type = 'password'
			},
			pass_blur(e) {
				console.log(e);
				uni.hideKeyboard()
			},
			// 输入密码
			change_pass(e) {
				console.log(e);
				console.log(e.detail.value);
				let val = e.detail.value
				this.put.password = val
				this.password_false = val
				// this.input_type = 'password'
			},
			// 隐藏显示密码
			cli_inputType() {
				let val = this.input_type
				if (val == 'password') {
					this.input_type = 'text'
				} else {
					this.input_type = 'password'
				}
				this.show_look = !this.show_look
			},
			// 点击登录
			cli_login() {
				let ww = this.login_where
				console.log(ww);
				if (ww == false) {
					this.loginCode()
				} else if (ww) {
					this.loginPassword()
				}
			},
			cli_loginNo() {
				uni.showToast({
					title: '请先填写手机号或者密码',
					icon: 'none'
				})
			},
			// 会长登陆 -- 手机号验证码
			loginCode() {
				let _that = this
				uni.request({
					url: allapi.loginCode,
					data: {
						phone: this.put.phone,
						yzCode: this.put.password
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						let val = res.data.msg
						console.log(val);
						if (res.data.code == 0) {
							uni.setStorage({
								key: 'agentId',
								data: res.data.data.id,
								success: function() {
									uni.setStorageSync('phone', _that.put.phone)
									uni.switchTab({
										url: '/pages/index/index'
									});
								}
							});

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			// 会长登陆 -- 手机号密码
			loginPassword() {
				let _that = this
				uni.request({
					url: allapi.loginPassword,
					data: {
						phone: this.put.phone,
						password: this.put.password
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						let val = res.data.msg
						console.log(val);
						if (res.data.code == 0) {
							uni.setStorage({
								key: 'agentId',
								data: res.data.data.id,
								success: function() {
									uni.setStorageSync('phone', _that.put.phone)
									uni.switchTab({
										url: '/pages/index/index'
									});
								}
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			// 发送短信
			cli_sendSMS() {
				this.sendSMS()
				this.show_yzm_two = false
				let time = this.yzm_time
				let _that = this
				let gettime = setInterval(function() {
					time--
					console.log(time);
					_that.yzm_time = time
					if (time == 0) {
						clearInterval(gettime)
						_that.yzm_time = 60
						_that.show_yzm_two = true
					}
				}, 1000)

			},
			sendSMS() {
				uni.request({
					url: allapi.sendSMS,
					data: {
						phone: this.put.phone,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.flex-js {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.login {
		padding-top: 0.1rpx;
		height: 1624rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/3.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.login-title {
		font-size: 48rpx;
		color: #F0FFF4;
		font-weight: normal;
	}

	.login-top {
		margin-top: 256rpx;
		margin-left: 68rpx;
		margin-right: 16rpx;
	}

	.login-1 {
		margin-left: 30rpx;
	}

	.login-2 {
		margin-top: 20rpx;
	}

	.login-change {
		width: 208rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #28CD50;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/4.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.login-content {
		margin-top: 190rpx;
	}

	.login-content-qiehuan {
		margin-left: 60rpx;
		margin-right: 50rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.login-content-qiehuan-left {
		width: 306rpx;
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/6.png');
		background-size: 100%;
		background-repeat: no-repeat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 2rpx;
		color: #FFFFFF;
	}

	.login-content-qiehuan-left1 {
		width: 322rpx;
		height: 120rpx;
		line-height: 126rpx;
		text-align: center;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/9.png');
		background-size: 100%;
		background-repeat: no-repeat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 2rpx;
		color: #28CD50;
	}

	.login-content-qiehuan-right {
		width: 322rpx;
		height: 120rpx;
		line-height: 126rpx;
		text-align: center;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		font-weight: 400;
		color: #28CD50;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/7.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.login-content-qiehuan-right2 {
		width: 306rpx;
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		font-weight: 400;
		color: #FFFFFF;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/10.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.login-id,
	.login-password {
		margin: 0 66rpx;
		height: 90rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/11.png');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		position: relative;
	}

	.login-id {
		margin-top: 28rpx;
	}

	.login-password {
		margin-top: 36rpx;
	}

	.login-passwordtxt {
		flex: 1;
		/* width: 300rpx; */
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		position: absolute;
		background: #ECF8EF;
		left: 100rpx;
		z-index: 666;
		height: 40rpx;
		overflow: hidden;
		background: red;
	}

	.login-input {
		flex: 1;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 28rpx;
		margin-right: 10rpx;
	}

	.login-id-img {
		width: 48rpx;
		height: 48rpx;
		margin-left: 24rpx;
	}

	.login-password-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 28rpx;
	}

	.login-password-look {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-password-look-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 32rpx;
	}

	.login-duanxin {
		width: 204rpx;
		height: 100rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/5.png');
		background-size: 100%;
		background-repeat: no-repeat;
		text-align: center;
		line-height: 100rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #28CD50;
	}

	.login-duanxin2 {
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/8.png');
		color: #BBBBBB;
		margin-top: 6rpx;
	}

	.login-fargit {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 66rpx;
		margin-top: 24rpx;
	}

	.login-fargit-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.login_btn {
		/* background: red; */
	}

	.login-login {
		margin: 24rpx 66rpx 0;
		height: 92rpx;
		background: linear-gradient(180deg, #3BDD62 0%, #1DC248 100%);
		box-shadow: -6rpx -6rpx 6rpx 0px #FFFFFF, 0px 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 46rpx;
		text-align: center;
		line-height: 92rpx;
		font-size: 36rpx;
		color: #FFFFFF;

	}

	.login-login-two {
		opacity: 0.5;
	}

	.login-xieyi {
		margin: 0 66rpx;
		margin-top: 20rpx;
	}

	.login-xieyi-img {
		width: 40rpx;
		height: 42rpx;
	}

	.login-xieyi-1 {
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
		margin-left: 16rpx;
	}

	.login-xieyi-2 {
		font-size: 24rpx;
		color: #28CD50;
		font-weight: 400;
		margin-left: 8rpx;
	}
</style>
